
<template>
  <div class="order" ref="orderRef">
    <!-- 调回结算订单会有问题 -->
    <s-Header name="我的订单" :nomore="false" :back="'/user'" >
      <!-- <template #rightIcon>
        aa
      </template> -->
    </s-Header>
    <van-tabs :active="state.status" @click-tab="onChangeTab" >
      <van-tab title="全部" name=''></van-tab>
      <van-tab title="待付款" name="0"></van-tab>
      <van-tab title="待确认" name="1"></van-tab>
      <van-tab title="待发货" name="2"></van-tab>
      <van-tab title="已发货" name="3"></van-tab>
      <van-tab title="交易完成" name="4"></van-tab>
    </van-tabs>
    <div class="content">
      <van-pull-refresh v-model="state.refreshing" :head-height="80" @refresh="onRefresh">
        <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
        <template #pulling="props">
          <img
            class="doge"
            src="https://fastly.jsdelivr.net/npm/@vant/assets/doge.png"
            :style="{ transform: `scale(${props.distance / 80})` }"
          />
        </template>
        <!-- 释放提示 -->
        <template #loosing>
          <img
            class="doge"
            src="https://fastly.jsdelivr.net/npm/@vant/assets/doge.png"
          />
        </template>
        <!-- 加载提示 -->
        <template #loading>
          <img
            class="doge"
            src="https://fastly.jsdelivr.net/npm/@vant/assets/doge-fire.jpeg"
          />
        </template>
        <!-- 加载提示 -->
        <van-list
          :loading="state.loading"
          :finished="state.finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="order_grounp" v-for="item in state.list" :key="item.orderNo">
            <div class="grounp_info">
              <span class="order_time">订单时间:{{item.createTime}}</span>
                <span class="pay_type">{{item.orderStatusString}}</span>
            </div>
            <van-card
              v-for="one in item.newBeeMallOrderItemVOS"
              @click-thumb="thumbClick(one,item.newBeeMallOrderItemVOS)"
              @click="orderClick(item)"
              :key="one.orderId"
              :num="one.goodsCount"
              :price="one.sellingPrice"
              desc="全场包邮"
              :title="one.goodsName"
              :thumb="$filters.prefix(one.goodsCoverImg)"
            />
          </div>
        </van-list>
        <!-- 图片预览组件使用 -->
        <van-image-preview className="previewName" closeable :show="state.show" :images="state.images"   @change="onChange" >
          <!-- 该版本不生效 <template v-slot:index>第{{ index + 1 }}页</template> -->
          <template #image="{ src }">
            <video style="width: 100%;" controls>
              <source :src="'fdfhdh'" />
            </video>
          </template>
        </van-image-preview>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script setup>
  import { reactive, ref, isRef, isReactive,nextTick, onUnmounted, onMounted, getCurrentInstance  } from 'vue'
  import { showSuccessToast, showFailToast, showLoadingToast, closeToast, showToast, showImagePreview  } from 'vant'
  import { useRoute, useRouter } from 'vue-router'
  import sHeader from '@/components/SimpleHeader.vue'
  import { getOrderList } from '@/service/order'

  const orderRef = ref(null);
  // 获取router实例
  const router = useRouter()
  // 获取当前组件route
  const route = useRoute()

  const state = reactive({
    show:false,
    images:[],
    status: '', // tabs
    loading: false, // 下拉列表是否正在加载中
    finished: false, // 是否全部加载完毕
    refreshing: false, // 是否下拉正在刷新
    list: [],
    page: 0,
    totalPage:9999
  })
  onMounted(async() => {
     
  })
  const getDateInterface = async()=>{
    if(state.finished) return;
    const {data} = await getOrderList({
      page:state.page,
      pageNumber: state.page, 
      status: state.status
    });
    const {currPage, list, pageSize, totalCount, totalPage} = data;
    console.log(111,currPage, list, pageSize, totalCount, totalPage);
    state.list = state.list.concat(list);
    state.totalPage = totalPage;
    state.loading = false;
    if(state.page >= state.totalPage) state.finished = true;
  }
  const onLoad = async() => {
    // 双向绑定 此时loading已经置为true
    if (!state.refreshing && state.page < state.totalPage) {
      state.page = state.page + 1;
    }
    if(state.refreshing){
      state.list = [];
      state.refreshing = false;
    }
    getDateInterface();
  };

  const onRefresh = () => {
    // 双向绑定 此时refreshing已经置为true
    console.log('onRefresh...',state.refreshing);
    state.page = 0;
    state.finished = false;
    // 此处需要手动将van-list状态修改
    state.loading = true;
    onLoad();
  };

  const onChangeTab = (val) => {
    console.log('onChangeTab...',val);
    state.status = val.name;
    state.list = [];
    onRefresh()
  }

  const orderClick = (orderItem) => {
    console.log('orderClick...',orderItem);
    goTo('/order-detail',{id:orderItem.orderNo})
  }

  const thumbClick = (orderItem,orderAll) => {
    console.log('thumbClick...',orderItem,orderAll);
    
    // 图片预览函数式调用
    // const showImgList = [ orderItem.goodsCoverImg ];
    const showImgList = orderAll.map(item=> item.goodsCoverImg);
    // 通过组件调用 ImagePreview 时，通过 ref 可以获取到 ImagePreview 实例并调用实例方法，详见组件实例方法。 通过$refs
    // resetScale 重置当前图片的缩放比
    // swipeTo 重置当前图片的缩放比
    // state.show = true;
    // state.images = showImgList;
    return
    showImagePreview({
      images: showImgList, // 需要预览的图片 URL 数组
      closeable: true, // 是否显示关闭图标
      startPosition: 1, // 图片预览起始位置索引 0 
      swipeDuration:300, // 动画时长，单位为 ms  300
      teleport: orderRef, // 指定挂载位置
      showIndex:true, // 是否显示页码 true
      showIndicators:true, // 是否显示轮播指示器
      loop:false, // 是否开启循环播放
      doubleScale:true, // 是否启用双击缩放手势，禁用后，点击时会立即关闭图片预览
      closeOnPopstate:true, // 是否在页面回退时自动关闭 true
      closeOnClickImage :true, // 是否在点击图片后关闭图片预览 true
      closeOnClickOverlay :true, // 是否在点击遮罩层后关闭图片预览 true
      vertical :false, // 是否开启纵向手势滑动 false
      maxZoom:3, // 手势缩放时，最大缩放比例 3
      minZoom:1/3, // 手势缩放时，最小缩放比例 1/3
      closeable:true, // 是否显示关闭图标
      closeIcon:'clear', // 关闭图标名称或图片链接 clear
      closeIconPosition:'top-right', // 关闭图标位置，可选值为 top-left bottom-left bottom-right
      transition:'van-fade', // 动画类名，等价于 transition 的 name 属性
      className:'previewName', // dialog弹出层类名
      overlayClass:'overlayClass', // 自定义遮罩层类名
      overlayStyle:{}, // 自定义遮罩层样式
      onChange(index){ // 切换图片时的回调函数，回调参数为当前索引
        showToast('页数改变',index);
      },
      onScale(index,scaleArr){ // 缩放图片时的回调函数，回调参数为当前索引和当前缩放值组成的对象
        console.log('onScale...',index,scaleArr)
      },
      onClose() {
        showToast('关闭');
      },
      beforeClose: () => { // 关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise
        console.log('beforeClose...');
        // 返回false时取消关闭
        return true;
      },
    });
  }
  
  const onChange = (index) => {
    console.log('onChange...',index);
  }

  const goBack = () => {
    router.go(-1)
  }

  const goTo = (r, query) => {
    router.push({ path: r, query: query || {} })
  }
</script>
<style lang="less">
  .order{
    .van-image-preview.previewName{
      top:44px;
    } 
    color:#ccc;
    .van-tabs{
      position: fixed;
      top: 44px;
      z-index: 1;
    }
    .content{
      height:calc(100vh - 88px);
      margin-top: 44px;
      overflow-y: scroll;
      .van-pull-refresh{
        // background: #ddd7d7;
        .van-pull-refresh__head{
          .doge{
            height: 64px;
            margin:6px auto;
            border-radius: 6px;
          }
        }
        .van-list{
          // background: red;
          .order_grounp{
            margin: 10px;
            border-radius: 4px;
            box-shadow: 1px 1px 4px 0px #ccc;
            overflow: hidden;
            .grounp_info{
              display: flex;
              justify-content: space-between;
              font-size: 14px;
              align-items: center;
              padding: 10px 10px 0px 10px ;
              color: #666;
              .pay_type{
                color:blueviolet;
              }
            }
          }
        }
      }
    }
  }
</style>
